<script lang="ts" setup name="XtxBreadItem">
import { inject } from 'vue';
defineProps({
  to:{
    type:String
  }
})
const separator = inject('separator')
</script>

<template>
<div class="XtxBreadItem">
  <!-- 如果to 存在就渲染 RouterLink组件
  如果to 不存在就渲染 span -->
  <RouterLink v-if="to" :to="to"><slot /></RouterLink>
  <span v-else><slot /></span>
  <i v-if="separator">{{ separator }}</i>
  <i v-else class="iconfont icon-angle-right"></i>
</div>
</template>

<style lang="less" scoped>
.xtx-bread-item {
  i {
    margin: 0 6px;
    font-size: 10px;
  }
  // 最后一个i隐藏
  &:nth-last-of-type(1) {
    i {
      display: none;
    }
  }
}
</style>